<template>
	<view class="container">
		<com-head textTit="商城" :typeVal="2" :scrollTop="scrollTop"></com-head>
		
		<view class="headWrap">
			<view class="serchBox" @click="utlis.goUrl('/pages/shop/serchShop')">
				<u-icon name="search" color="#333" size="28"></u-icon>
				<input type="text" value=""  placeholder="搜索商品" placeholder-style="color:#636363;font-size:26rpx"/>
			</view>
			<view class="shopCar" @click="goShop()">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/gouwuche.png" mode=""></image>
				<view class="num" v-if="goodsCarNum">{{goodsCarNum}}</view>
			</view>
		</view>
		<!-- banner -->
		<view class="bannerWrap" v-if="bannerData.length">
			<u-swiper :list="bannerData" height="240" :border-radius="10"></u-swiper>
		</view>
		
		<image class="bannerImg" v-else src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/12/b9cdcedd8bd14c13892413004f423005.png" mode="aspectFill"></image>
		<!-- 热门产品 -->
		<view class="hotWrap">
			
			<!-- tab -->
			<view class="tabWrap" >
			  <scroll-view scroll-x class="classifyList" 
			  :scroll-with-animation="true"
			  :scroll-into-view="`nav${activeIndex - 1}`"
			  >
			      <view class="list" :id="`nav${index}`" @click="chiose(index,ele.id)" style="display:inline-block" :class="activeIndex == index ? 'active' : ''" v-for="(ele,index) in list1" :key="index">
					  {{ele.title}}
					  <image v-if="activeIndex == index" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg234567.png" class="bg" />
				  </view>
			    </scroll-view>
				
				<image class="screen" @click="screenFun()" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/sx.png" mode=""></image>
			
			</view>
			
			<!-- 列表 -->
			<view class="hotBox">
				<view class="hotList" v-for="(ele,index) in goodsList" :key="index"
				@click="goDetails(ele, activeIndex === 0)"
				>
					<image :src="ele.picture[0]" mode="aspectFill"></image>
					<view class="bottom">
						<view class="title">
							<text class="name">{{ele.title}} {{activeIndex}}</text>
							<text class="num">已售{{ele.sale_volume}}件</text>
						</view>
						<!-- <view class="skr">{{ele.sku[0].sku_text}}</view> -->
						<view class="priceWrap">
							<!-- v-if="userInfo.vip_id <= 0" -->
							<text class="price"><text>¥</text>{{ele.sku[0].sale_price}} <text v-if="ele.min_integral_price > 0">+ {{ele.min_integral_price}} 积分</text></text>
							<!-- <text class="price" v-else>¥{{ele.sku[0].vip_price}}</text> -->
							<view class="buyBtn" v-if="activeIndex === 1">
								<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/gwc.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore margin-top="30" margin-bottom="30" :status="status" />
		</view>
		
		<!-- 加盟按钮 -->
		<view class="league" @click="plFun()" v-if="userInfo.is_staff < 1">
			<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/league.png"></image>
		</view>
		
		<!-- 筛选弹窗 -->
		<screenPop :show="screenShow" ref="screenRef" :type="activeIndex == 1 ? 'integral' : ''" @clickHandle="clickHandle" @clickSubmit="clickSubmit"></screenPop>
		<!-- 加盟认证弹窗 -->
		<authentication :show="authenticationShow" @clickHandle="authenticationHandle"></authentication>
	</view>
</template>
<script>
	import screenPop from '@/components/screen/index.vue'
	import authentication from '@/components/pop/authentication.vue'
	
	export default {
		components:{
			screenPop,
			authentication
		},
		data() {
			return {
				activeIndex:0,
				list1:[
					// {id: 0, title: '全部'},
					{id: 1, title: '热门商品'},{id: 2, title: '积分中心'}
				],
				list: [],
				status:'loading',
				total:0,
				page:1,
				cate_id:0,
				goodsList:[],
				screenShow: false,
				bannerData: [],
				objItem: {},
				authenticationShow: false,
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onShow() {
			this.page = 1
			this.status = 'loading'
			this.goodsList=[]
			this.getShopList()
			this.getGoods()
			if(this.token){
				this.getCarList()
				
			}
		},
		async onPullDownRefresh() {
			this.goodsList=[]
			this.list=[]
			this.$u.toast('刷新成功!') 
			this.getShopList(true)
			this.getGoods()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.total > this.goodsList.length) {
				this.page++;
				this.getShopList();
			}
		},
		methods: {
			authenticationHandle() {
				this.authenticationShow = false
			},
			plFun() {
				this.authenticationShow = true
			},
			clickHandle() {
				this.screenShow = false
			},
			clickSubmit(e) {
				this.objItem = e
				this.screenShow = false
				this.goodsList = []
				this.page=1
				this.getGoods()
			},
			screenFun() {
				this.$refs.screenRef.opens(this.objItem)
				this.screenShow = true
			},
			// 商品列表
			async getGoods(){
				let pls = Object.assign({},{type: this.list1[this.activeIndex].id}, this.objItem)
				let {code,data} = await this.$u.api.getGoods(pls);
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					data.data.forEach((ele)=>{
						ele.picture = ele.picture.split(',')
					})
					this.goodsList = [...this.goodsList, ...data.data];
					this.total = data.total;
					if (this.total <= this.goodsList.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			// 获取购物车列表
			async getCarList(){
				let {code,data} = await this.$u.api.carLists();
				if(code){
					let num = data.length
					this.$u.vuex('goodsCarNum', num)
				}
			},
			goShop(){
				if(this.token){
					this.utlis.goUrl(`/pages/shop/shopCar`)
				}else{
					uni.switchTab({
						url:"../mine/index"
					})
				}
			},
			goDetails(ele, hiddCar){
				let url = `/pages/shop/shopInfo?goods_id=${ele.id}&hiddCar=${hiddCar ? 1: 0}`;
				this.utlis.goUrl(url)
			},
			// 获取服务项目列表
			async getShopList(flag){
				uni.stopPullDownRefresh()
				let {data,code} = await this.$u.api.getHome({store_id:this.store_id,cate_id:this.cate_id,page:this.page});
				let obj = {
					title:'全部',
					id:0
				}
				if(this.page == 1){
					let newData = []
					data.ad.forEach(item =>{
						newData.push({title: item.title, image: item.url})
					})
					this.bannerData = newData
				}
				// if(data.category.data.length>=1){
				// 	this.list1 = [obj,data.category.data[0]]
				// }else if(data.category.data.length>=2){
				// 	this.list1 = [obj,data.category.data[0],data.category.data[1]]
				// }else{
				// 	this.list1 = [obj]
				// }
			},
			chiose(index,id){
				console.log(id,"ddddddddddd")
				this.cate_id = id
				this.page=1
				this.goodsList=[]
				this.activeIndex = index
				this.getGoods()
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	// padding: 0 40rpx;
	padding: 50rpx 40rpx;
	.tabWrap{
		width: 100%;
		white-space:nowrap;
		margin: 32rpx 0 30rpx 0;
		position: relative;
		.screen{
			position: absolute;
			top: 15rpx;
			right: 0;
			width: 34rpx;
			height: 34rpx;
		}
	}
	.classifyList{
		white-space: nowrap;
		display: flex;
		width: 93%;
		.list{
			padding: 10rpx 0;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #999999;
			margin-right: 52rpx;
			position: relative;
			.bg{
				width: 100%;
				height: 8rpx;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
		.active{
			// color: #007664;
			// background: rgba(136,29,3,.1);
			color: #242833;
			font-weight: bold;
		}
	}
	.hotWrap{
		.hotBox{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.hotList{
				margin-bottom: 24rpx;
				border-radius: 16rpx;
				box-shadow: 0px -2rpx 4rpx 0rpx rgba(0,0,0,0.04); 
				overflow: hidden;
				.bottom{
					padding: 15rpx 13rpx 18rpx 18rpx;
					background-color: #FFFFFF;
				}
				.priceWrap{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;
					.price{
						font-size: 32rpx;
						color: #007664;
						text-align: right;
						font-weight: bold;
						padding-left: 20rpx;
						position: relative;
						text{
							font-size: 24rpx;
							color: #007664;
							margin-right: 5rpx;
							position: absolute;
							bottom: 5rpx;
							left: 0;
						}
					}
					.buyBtn{
						width: 34rpx;
						height: 34rpx;
						image{
							width: 34rpx;
							height: 34rpx;
						}
					}
				}
				.skr{
					width: 280rpx;
					color: #999999;
					font-size: 24rpx;
					margin-bottom: 8rpx;
					line-height: 33rpx;
					overflow: hidden;
					text-overflow:ellipsis;    
					white-space: nowrap;
				}
				.title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 4rpx;
					.name{
						width: 170rpx;
						overflow: hidden;    
						text-overflow:ellipsis;    
						white-space: nowrap;
						font-size: 26rpx;
						color: #071529;
						line-height: 37rpx;
					}
					.num{
						color: #999999;
						font-size: 20rpx;
					}
				}
				image{
					width: 327rpx;
					height: 243rpx;
					display: block;
				}
			}
		}
		.headWrap{
			color: #071529;
			font-size: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-bottom: 50rpx;
		}

	}

	.bannerWrap{
		// margin-bottom: 50rpx;
	}
	.bannerImg{
		display: block;
		width: 690rpx;
		height: 240rpx;
		margin-bottom: 50rpx;
		border-radius: 6rpx;
	}
	>.headWrap{
		// padding-top: 39rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		.serchBox{
			width: 560rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			line-height: 72rpx;
			height: 72rpx;
			background: rgba(255,255,255,0.4);
			border-radius: 60rpx;
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0,0,0,0.07); 
			display: flex;
			align-items: center;
			input{
				color: #333333;
				padding-left: 20rpx;
			}
		}
		.shopCar{
			width: 94rpx;
			height: 72rpx;
			background: #ffffff;
			border-radius: 60rpx;
			box-shadow: 0px 2rpx 10rpx 0rpx rgba(0,0,0,0.07); 
			position: relative;
			image{
				width: 94rpx;
				height: 72rpx;
				z-index: 99;
			}
			.num{
				width: 36rpx;
				height: 36rpx;
				background: #b23213;
				border-radius: 50%;
				text-align: center;
				line-height: 36rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				top: -10rpx;
			}
		}
	}
}
.league{
	position: fixed;
	bottom: 100rpx;
	right: 20rpx;
	image{
		width: 110rpx;
		height: 110rpx;
	}
}
</style>
<style >
page{
	background-color: #FAFAFA;
}
</style>
